<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <script src="../assets/flexible/flexible.debug.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账户登录</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
</head>

<body>
    <header class="header">
        <div class="iconfont left index">&#xe607;返回</div>
        <div class="center">账户登录</div>
        <div class="right"></div>
    </header>
    <div class="logo">
        <div>
            <img src="https://m.zuipin.cn/wap/images/V7_logo.png">
        </div>
    </div>
    <div class="nav">
        <ul>
            <li class="on denglu">密码登录</li>
            <li class="duanxin">短信登录</li>
        </ul>
    </div>
    <div class="main">
        <input type="text" placeholder="手机号 / 邮箱" class="inp"><br>
        <input type="password" placeholder="登录密码" class="int">
        <span class="span">
            <i class="iconfont show">&#xe60f;</i>
            <i class="iconfont hide" >&#xe64b;</i>
        </span>

        <button class="btn">立即登录</button>
        <div class="footer">
            <div class="left liji">立即注册</div>
            <div class="right mima">忘记密码</div>
        </div>
    </div>

    <div class="short">
        <input type="text" placeholder="手机号码 / 邮箱" class="inp">
        <input type="text" placeholder="短信验证码" class="input">
        <span class="button">获取短信验证码</span>
        <button class="btn">登录</button>
        <div class="footer">
            <div class="left liji">立即注册</div>
            <div class="right"></div>
        </div>
    </div>

    <div class="password">
        <input type="text" placeholder="手机号" class="inp">
        <input type="text" placeholder="短信验证码" class="input">
        <span class="button">获取短信验证码</span>
        <input type="password" placeholder="设置6-16位登录密码" class="int">
        <i class="iconfont show">&#xe60f;</i>
        <i class="iconfont hide">&#xe64b;</i>
        <button class="btns">确定</button>
    </div>
    <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>
    <script src="../assets/cookie/jquery.cookie.js"></script>
    <script>
        $(function () {
            $('.index').click(function () {
                history.back();
            })
            $('.liji').click(function () {
                location.href = "../html/register.html"
            })

            $('li').click(function () {
                $(this).addClass('on').siblings().removeClass('on');
            });
            $('.mima').click(function () {
                $('.main').hide();
                $('.password').show();
                $('.nav').hide();
            })
            $('.duanxin').click(function () {
                $('.main').hide();
                $('.short').show();
                $('.password').hide();
            })
            $('.denglu').click(function () {
                $('.short').hide();
                $('.main').show();
                $('.password').hide();
            })
            $(".btn").click(function () {
                var str = $(".inp").val();
                var arr = $('.int').val();
                var ret = /^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/;
                var rets = /^\w{6,16}$/;
                if (str == "") {
                    alert('请输入手机号');
                } else if (arr == "") {
                    alert('请输入密码')
                } else if (ret.test(str) != true) {
                    alert('请输入正确的手机号');
                } else if (rets.test(arr) != true) {
                    alert('请输入6-16位密码');
                }
            });

            $(".button").click(function () {
                settime(this)
            });
            var countdown = 60;
            function settime(obj) {
                if (countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.innerHTML = "获取验证码";
                    countdown = 60;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.innerHTML = "" + countdown + "秒后再获取";
                    countdown--;
                }
                setTimeout(function () {
                    settime(obj)
                    console.log(obj);
                }, 1000)
            }
            var ints = $(".int");
           $('i').click( function () {
                if ($(".hide").css("display")=="none") {
                 $(".hide").css("display","block");
                 $(".show").css("display","none");//密码可见
                    ints.attr('type', 'text');
                } else {
                    $(".show").css("display","block");
                     $(".hide").css("display","none");//密码不可见
                    ints.attr('type', 'password');
                };
            });
        })
    </script>
</body>

</html>